<template>
  <div>
    <van-nav-bar title="修改密码"
                 right-text="确认"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <div class="wrapper">
      <van-field class="input-field"
                 v-model="data.value1"
                 placeholder="请输入原密码" />
      <van-field class="input-field"
                 v-model="data.value2"
                 placeholder="请输入新密码" />
      <van-field class="input-field"
                 v-model="data.value3"
                 placeholder="请输再一次入新密码" />
    </div>
    <div class="cp-notice">
      <van-icon name="warning-o"
                size="20"
                color="#fdb52b"
                style="vertical-align: -20%;margin-right:5px;" />
      <span class="cp-notice-text">请妥善保存好您的新密码</span>
    </div>
  </div>
</template>
<script>
import { reactive, getCurrentInstance } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      password: '',
      value1: '',
      value2: '',
      value3: ''
    })
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/userInfo')
    }
    function onClickRight () {
      proxy.$axios.user.changePassword(proxy.data.password).then(res => {
        if (res.status === 200) {
          Toast.success('提交成功')
        }
      })
    }
    return {
      data,
      onClickLeft,
      onClickRight
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  margin: $margin-horizon;
  .van-field {
    margin-top: $margin-verticle;
    border-radius: $border-radius;
  }
}
.cp-notice {
  margin: $margin-horizon;
  &-text {
    color: $theme-color6;
    font-size: $fontsize-5;
  }
}
</style>
